<template>
  <div ref="line"></div>
</template>

<script>
//引包
import * as echarts from "echarts";
export default {
  name: "",
  //因为可以获取容器
  mounted() {
    //初始化echarts实例
    let mycharts = echarts.init(this.$refs.line);
    //设置配置项
    let options = {
   
      //调整图表的布局
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      xAxis: {
        show: false,
        //x轴均分
        type: "category",
        //两侧不留白
        boundaryGap:false,
      },
      yAxis: { show: false },
      series: {
        type: "line",
        data: [22, 44, 19, 13, 66, 32, 57],
        //平滑曲线
        smooth: true,
        //拐点的样式
        itemStyle: {
          opacity: 0,
        },
        //填充颜色
        areaStyle: {
          //填充区域，渐变
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "yellowgreen", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "white", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    };
    //设置配置项
    mycharts.setOption(options);
  },
};
</script>

<style scoped>
div {
  width: 100%;
  height: 100%;
}
</style>
